<template>
	<view class="character-list">
		<uv-button v-if="showBack" text="返回" @click="back"></uv-button>
		<view class="content uv-flex-row">
			<view class="list">
				<view class="item" v-for="(item,index) in characterList" :key="index">
					<uv-text :text="item.name" color="#fff"></uv-text>
					<view class="avatar uv-flex-row">
						<view @click="clickItem(index,index2)" class="avatar-item" :class="[{'active':activeIndex == index && activeIndex2 == index2}]" v-for="(item2,index2) in item.children" :key="index2">
							<uv-image :src="`/static/images/character/${item2.avatar}-small.png`" width="75px" height="75px" mode="aspectFill"></uv-image>
						</view>
					</view>
				</view>
			</view>
			<view class="display">
				<image :src="`/static/images/character/${characterList[activeIndex].children[activeIndex2].avatar}-large.png`" mode="widthFix"></image>
			</view>
			<view class="benefit"> 12345 </view>
		</view>
		<view class="name uv-flex-row" style="width: 200px;margin: 0 auto;">
			<uv-text :text="characterName" color="#fff" align="center" bold margin="10px 0"></uv-text>
			<uv-text text="随机" color="#fff" align="center" bold margin="0 10px" style="cursor: pointer;" @click="characterName = randomCharacterName()"></uv-text>
			<uv-icon name="edit-pen-fill" style="cursor: pointer;" @click="editCharacterName"></uv-icon>
		</view>
		<view class="btns">
			<uv-button text="新建角色" :loading="btnLoading" loading-text="创建中..." @click="submit"></uv-button>
		</view>
		<uv-modal ref="modal" title="新建角色" showCancelButton>
			<uv-input placeholder="输入角色名称" v-model="characterName"></uv-input>
		</uv-modal>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import { characterList, randomCharacterName } from '@/common/js/character.js';
	import { createCharacter } from '@/common/api/character.js';
	import { setLocalCharacter } from '@/common/js/character.js';
	const emits = defineEmits(['back']);
	const activeIndex = ref(0);
	const activeIndex2 = ref(0);
	const characterName = ref(randomCharacterName());
	const modal = ref(null);
	const btnLoading = ref(false);
	defineProps({
		showBack: {
			type: Boolean,
			default: false
		}
	})

	function clickItem(index, index2) {
		activeIndex.value = index;
		activeIndex2.value = index2;
	}
	async function submit() {
		if (!characterName.value) {
			uni.$uv.toast('请输入昵称');
		}
		btnLoading.value = true;
		try {
			const avatar = characterList[activeIndex.value].children[activeIndex2.value].avatar;
			const type = characterList[activeIndex.value].type;
			const { data } = await createCharacter({
				nickname: characterName.value,
				avatar,
				type
			})
			setLocalCharacter(data);
			// ====================== 教师需要单独跳转======================
			switch (type) {
				case 'STUDENT':
					uni.$uv.route({
						url: '/pages/chapter/chapter',
						type: 'redirectTo'
					})
					break;
				case 'TEACHER':
					uni.$uv.route({
						url: '/pages/group/group',
						type: 'redirectTo'
					})
					break;
			}

		} catch (e) {
			uni.showModal({
				content: e.msg
			})
		}
		btnLoading.value = false;
	}

	function editCharacterName() {
		modal.value.open();
	}

	function back() {
		emits('back');
	}
</script>
<style scoped lang="scss">
	.character-list {
		padding: 30px;
	}
	.list {
		width: 400px;
		.item {
			padding: 20px 0;
		}
		.avatar {
			flex-wrap: wrap;
			&-item {
				width: 75px;
				height: 75px;
				margin: 10px;
				border-radius: 2px;
				background: rgba(0, 0, 0, 0.3);
				border: 2px solid transparent;
				cursor: pointer;
				&.active {
					border-color: red;
				}
			}
		}
	}
	.display {
		padding: 100px 0;
	}
</style>